<template>
	<div class="forget-pass-page">
		<a-form layout="vertical" :model="form" :rules="rules" ref="forgetPassForm">
			<!-- 角色选择 -->
			<a-form-item label="选择角色" required>
				<a-radio-group v-model:value="role" @change="clearForm">
					<a-radio value="user">用户</a-radio>
					<a-radio value="landlord">房东</a-radio>
					<a-radio value="admin">管理员</a-radio>
				</a-radio-group>
			</a-form-item>

			<!-- 邮箱 -->
			<a-form-item label="邮箱" name="email">
				<a-input v-model:value="form.email" placeholder="请输入邮箱" />
			</a-form-item>

			<!-- 验证码 -->
			<a-form-item label="验证码" name="code">
				<div class="captcha-container">
					<a-input v-model:value="form.code" placeholder="请输入验证码" class="captcha-input" />
					<a-button @click="getForgetPassCode" :disabled="countDown > 0">
						{{ countDown > 0 ? `${countDown}s后可重新获取` : '获取验证码' }}
					</a-button>
				</div>
			</a-form-item>

			<!-- 新密码 -->
			<a-form-item label="新密码" name="newPassword">
				<a-input-password v-model:value="form.newPassword" placeholder="请输入新密码" />
			</a-form-item>

			<!-- 确认密码 -->
			<a-form-item label="确认密码" name="confirmPassword">
				<a-input-password v-model:value="form.confirmPassword" placeholder="请再次输入密码" />
			</a-form-item>

			<!-- 提交按钮 -->
			<a-form-item>
				<a-button type="primary" block @click="resetPassword">确认修改</a-button>
				<div class="tip">
					<text> 点击<a @click="goToLogin">登录</a> </text>
				</div>
			</a-form-item>
		</a-form>
	</div>
</template>

<script>
	import userApi from '@/api/userApi';
	import landlordApi from '@/api/landlordApi';
	import { message } from 'ant-design-vue';
	import router from "@/router";
	import adminApi from "@/api/adminApi";

	export default {
		data() {
			return {
				role: 'user', // 默认角色
				form: {
					email: '',
					code: '',
					newPassword: '',
					confirmPassword: ''
				},
				rules: {
					email: [
						{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
						{ type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
					],
					code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
					newPassword: [
						{ required: true, message: '请输入新密码', trigger: 'blur' },
						{ min: 6, message: '密码至少6位', trigger: 'blur' }
					],
					confirmPassword: [
						{ required: true, message: '请输入确认密码', trigger: 'blur' },
						{
							validator: (rule, value, callback) => {
								if (value) {
									if (value !== this.form.newPassword) {
										return callback(new Error('两次输入的密码不一致'));
									}
								}
								callback();
							},
							trigger: 'blur'
						}
					]
				},
				countDown: 0, // 倒计时
				timer: null // 定时器
			};
		},
		methods: {
			// 获取忘记密码验证码
			getForgetPassCode() {
				if (!this.form.email) {
					message.error('请输入邮箱');
					return;
				}
				const getCodeApi =
					this.role === 'user'
						? (email) => userApi.getUserForgetPassCode(email)
						: this.role === 'admin'
							? (email) => adminApi.getAdminForgetPassCode(email)
							: (email) => landlordApi.getLandlordForgetPassCode(email);


				getCodeApi(this.form.email.trim())
					.then(() => {
						message.success('验证码已发送');
						this.startCountDown();
					})
					.catch((err) => {
						console.error(err.data?.message || '获取验证码失败');
					});
			},
			clearForm() {
				this.form.email = ''
				this.form.password = ''
				this.form.code = ''
			},
			// 启动倒计时
			startCountDown() {
				this.countDown = 60;
				this.timer = setInterval(() => {
					this.countDown -= 1;
					if (this.countDown <= 0) {
						clearInterval(this.timer);
					}
				}, 1000);
			},

			// 重置密码
			resetPassword() {
				this.$refs.forgetPassForm.validate().then(() => {
					const resetPassApi = this.role === 'user'
						? userApi.userForgetPass
						: this.role === 'admin'
							? adminApi.adminForgetPass
							: landlordApi.landlordForgetPass;

					resetPassApi({
						email: this.form.email.trim(),
						code: this.form.code.trim(),
						newPassword: this.form.newPassword.trim(),
						confirmPassword: this.form.confirmPassword.trim()
					})
						.then(() => {
							message.success('密码重置成功');
							this.$router.push('/login');
						})
						.catch((err) => {
							console.error(err.response?.data?.message || '密码重置失败');
						});
				});
			},
			goToLogin(){
				router.push('/login')
			}
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		}
	};
</script>

<style scoped>
	.forget-pass-page {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90vh;
	}

	.captcha-container {
		display: flex;
		align-items: center;
	}

	.captcha-input {
		width: 70%;
		margin-right: 10px;
	}

	.tip {
		display: flex;
		flex-direction: column;
		margin-top: 1rem;
		align-items: center;
	}
</style>
